<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="search pull-left">
					<span>任务名称</span>
					<Input 
						v-model="searchValue['taskName']" 
						placeholder="任务名称" 
						@on-enter="searchClick" 
						style="width: 150px;padding-left: 5px;"></Input>
					&nbsp;&nbsp;
					<span>时间</span>
					<DatePicker 
						v-model="searchValue['start_time']" 
						type="datetime" 
						placeholder="开始日志时间" 
						style="width: 180px;padding-left: 5px;"
						@on-open-change="timeopen('start_time')"
						@on-change="timeChange"></DatePicker>
					-
					<DatePicker 
						v-model="searchValue['end_time']" 
						type="datetime" 
						placeholder="结束日志时间" 
						style="width: 180px;"
						@on-open-change="timeopen('end_time')"
						@on-change="timeChange"></DatePicker>
				</div>
				<div class="searchBtn pull-left" @click="searchClick">
					<Button type="ghost" shape="circle" icon="ios-search"></Button>
				</div>
				<div class="status-data pull-right">
					成功<span class="status-success">{{status.success}}</span>
					运行中<span class="status-running">{{status.running}}</span>
					失败<span class="status-fail">{{status.fail}}</span>
				</div>
			</div>
			<div class="info-table">
				<info-table 
					class="small-table"
					:thead="thead" 
					:tbody="tbody"
					:total="total"></info-table>
			</div>
		</div>
		
		<info-modal 
			class="infoDetail-modal"
			ref="info-modal"
			title="信息详情">
			{{infoDetail}}
		</info-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoTableMixin, infoModalMixin } from 'common/js/mixins';
	import { TaskThead } from 'common/js/table';
	import { errorNotice } from 'common/js/dom';
	import { getFunctionJournalList, getFunctionJournalStatus } from 'api/Main';
	
	export default {
		mixins: [loadingMixin, infoTableMixin, infoModalMixin],
		created() {
			this.searchObj = null;
			
			this._getList();
			
			this._getStatus();
			
			this.time = setInterval(() => {
				this._getList(this.page);
			
				this._getStatus();
			}, 10000)
		},
		data() {
			return {
				infoDetail: '',
				status: {
					success: 0,
					running: 0,
					fail: 0
				},
				searchValue: {
					taskName: '',
					start_time: '',
					end_time: ''
				},
				thead: TaskThead(this),
				tbody: [],
				total: 0,
				showLoading: false
			}
		},
		methods: {
			infoDetailClick(row) {
				this.infoDetail = row.info;
				this.$refs['info-modal'].showModal();
			},
			searchClick() {
				this._getList()
			},
			search() {
				this.searchObj = {};
				
				this.searchObj['searchProperty'] = {
					taskName: ''
				};
				
				if (this.searchValue.taskName) {
					this.searchObj['searchProperty']['taskName'] = this.searchValue.taskName;
				}
				
				this.searchObj['searchProperty'] = JSON.stringify(this.searchObj['searchProperty']);
				
				if (this.searchValue.start_time && this.searchValue.end_time) {
					this.searchObj['startEndTime'] = `${this.searchValue.start_time}/${this.searchValue.end_time}`;
					this.searchObj['searchTimeProperty'] = 'logTime';
					return;
				}
				
				if (this.searchValue.start_time) {
					this.searchObj['startEndTime'] = `${this.searchValue.start_time}/`;
					this.searchObj['searchTimeProperty'] = 'logTime';
				}
				
				if (this.searchValue.end_time) {
					this.searchObj['startEndTime'] = `/${this.searchValue.end_time}`;
					this.searchObj['searchTimeProperty'] = 'logTime';
				}
			},
			timeopen(key) {
				this.timeKey = key;
			},
			timeChange(time) {
				this.searchValue[this.timeKey] = time;
			},
			_getList(page) {
				this.showLoading = true;
				this.search();
				if (page) {
					if (page !== this.page) {
						this.page = page;						
					}
				}
				getFunctionJournalList(this.searchObj, page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getStatus() {
				this.showLoading = true;
				getFunctionJournalStatus()
					.then(res => {
						this.status = res;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
		},
		beforeDestroy() {
			clearInterval(this.time);
		}
	}
</script>

<style lang="scss">
	.status-data {
		line-height: 32px;
		.status-success {
			color: green;
		}
		.status-running {
			color: blue;
		}
		.status-fail {
			color: red;
		}
	}
	.infoDetail-modal {
		.ivu-modal {
			width: 750px;			
		}
	}
</style>